<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .orange
    {
        color: orange;
    }
    .red
    {
        color: red;
    }
    .blue
    {
        color: blue;
    }
    .green
    {
        color: green;
    }
    .bg
    {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1 v-bind:class='greenColor'>你好我叫张晓冬，我显示的文本颜色应该是绿色的</h1>

    <h1 v-bind:class="{redColor:isNotOk}"></h1>

    <h1 v-bind:class='{redColor:isOk ,bg:isOk}'></h1>

    <h1></h1>

    <h1></h1>

    
    <script src="vue.js"></script>

    <script>
    new Vue({
        el:'div',
        data:{
              greenColor:'green',
              redColor:'red',
              blueColor:'blue',
              orange:'orange',
              bg:'bg',
              isNotOk:false,
              isOk:true
              
        }        
    })
    </script>
</body>
</html>